import React from 'react';
import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';

interface FocusableButtonProps {
  title: string;
  onPress?: () => void;
  onFocus?: () => void;
  isFocused?: boolean;
  disabled?: boolean;
  loading?: boolean;
  style?: ViewStyle;
  textStyle?: TextStyle;
}

export const FocusableButton: React.FC<FocusableButtonProps> = ({
  title,
  onPress,
  onFocus,
  isFocused = false,
  disabled = false,
  loading = false,
  style,
  textStyle,
}) => {
  return (
    <TouchableOpacity
      style={[
        styles.button,
        isFocused && styles.focused,
        disabled && styles.disabled,
        style,
      ]}
      onPress={onPress}
      onFocus={onFocus}
      disabled={disabled}
      tvParallaxProperties={{
        enabled: true,
        shiftDistanceX: 2.0,
        shiftDistanceY: 2.0,
        tiltAngle: 0.05,
        magnification: 1.1,
      }}
    >
      <Text style={[
        styles.text,
        isFocused && styles.focusedText,
        disabled && styles.disabledText,
        textStyle,
      ]}>
        {title}
      </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
    backgroundColor: '#4a90e2',
    borderWidth: 2,
    borderColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
  },
  focused: {
    borderColor: '#ffffff',
    backgroundColor: '#5a9ee2',
    shadowColor: '#ffffff',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.5,
    shadowRadius: 5,
    elevation: 6,
  },
  disabled: {
    backgroundColor: '#666666',
    opacity: 0.6,
  },
  text: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  focusedText: {
    color: '#ffffff',
  },
  disabledText: {
    color: '#cccccc',
  },
}); 